<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <div slot="header">
        资源统计
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="0" :value="statistics.filesCount" title="文件总数"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="文件大小" :precision="2" :value="statistics.filesSize">
              <template slot="suffix"> {{ statistics.fileSizeUit }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="0" :value="statistics.todayFilesCount" title="今日新增文件">
              <template slot="prefix">
                <i class="el-icon-top" style="color: red"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="新增文件大小" :precision="2" :value="statistics.todayFilesSize">
              <template slot="prefix">
                <i class="el-icon-top" style="color: red"></i>
              </template>
              <template slot="suffix"> {{statistics.todayFilesSizeUnit}}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-container>
      <el-aside class="aside">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>
        <el-tree :data="data" ref="tree" @node-click="handleNodeClick" :filter-node-method="filterNode">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button v-if="data.fileId!=null"
                  type="text"
                  size="mini"
                  @click="download(node,data)"
              >
                <i class="el-icon-download"></i>下载
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-main style="height: 700px">
        <div class="markdown-body" v-if="this.value">
          <VueMarkdown id="pre" :source="value" v-highlight></VueMarkdown>
        </div>
        <div v-else>
          <el-empty description="无预览文件"></el-empty>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import {filetree, preview, statistics} from "@/api/resource";
import {saveAs} from 'file-saver';
export default {
  name: "ResourceWare",
  data() {
    return {
      filterText: '',
      statistics:{},
      data:[],
      value: '',// value的值是要解析的markdown数据
      url:''
    };
  },
  components: {
    VueMarkdown
  },
  methods: {
    handleNodeClick(data) {

      //点击的文件，在右侧预览
      if (data.fileId!=null){
        console.log(data.fileId);
        this.preview(data.fileId)
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    filetree(){
      filetree().then(res=>{
        this.data=res.data
      })
    },
    download(node,data){
      if(this.value){
        let label = data.label;
        let str = new Blob([this.value], {type: 'text/plain;charset=utf-8'});
        saveAs(str,label+`.md`);
      }else {
        let label=data.label
        preview(data.fileId).then(data=>{
          this.value=data.data

          if (this.value){
            let str = new Blob([this.value], {type: 'text/plain;charset=utf-8'});
            saveAs(str,label+`.md`);
          }else {
            this.$alert('文件内容为空！', '系统提示', {
              confirmButtonText: '确定',
            });
          }
        })
      }
    },
    preview(fileId){
      preview(fileId).then(data=>{
        this.value=data.data
      })
    },
    getStatistics(){
      statistics().then(data=>{
        this.statistics=data.data
      })
    }
  },
  mounted() {
    this.filetree()
    this.getStatistics()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.aside{
}
</style>
